<template>
  <view class="page-body">
	  <u-navbar :is-back="false" title="销售报表详情"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
    <view class="x-row userRow whiteBg u-skeleton">
      <view class="x-col-center uimg">
        <image class="u-skeleton-circle" :src="$api.UserImg(info.fUserId)"></image>
      </view>
      <view class="x-col x-col-center">
        <view class="send u-skeleton-fillet">
          {{info.fUserName}}
        </view>
        <view class="time u-skeleton-fillet">
          {{info.fCreateTime}}
        </view>
      </view>
    </view>
    <view class="infos whiteBg">
      <block v-if="type==0">
        <view class="itit">
          今日完成工作
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fContent}}
        </view>

        <view class="itit">
          未完成工作：
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fNotDo}}
        </view>
      </block>
      <block v-if="type==1">
        <view class="itit">
          本周工作内容
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fContent}}
        </view>
        <view class="itit">
          本周工作总结：
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fSumUp}}
        </view>
        <view class="itit">
          下周工作计划
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fNextPlan}}
        </view>

      </block>
      <block v-if="type==2">
        <view class="itit">
          本月工作内容
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fContent}}
        </view>
        <view class="itit">
          本月工作总结
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fSumUp}}
        </view>
        <view class="itit">
          下月工作计划
        </view>
        <view class="cons u-skeleton-fillet">
          {{info.fNextPlan}}
        </view>

      </block>
      <view class="itit">
        需协调工作
      </view>
      <view class="cons u-skeleton-fillet">
        {{info.fNeedHelp}}
      </view>

      <view class="itit">
        图片
      </view>
      <view class="imgBox u-skeleton-circle">
        <image :src="img" @click="showImgs(img)" class="img" v-for="(img,idx) in info.fPics"
          :key="idx"></image>
      </view>
    </view>
    <view class="" style="height: 16rpx;"></view>
    <view class="infos whiteBg">
      <view class="itit">
        发送到人
      </view>
      <view class="sends">
        <view class="sli" v-for="(li,lidx) in info.list" :key="lidx">
          <image :src="li.avatar"></image>
          <view class="sname ellipsis">
            {{li.nickname}}
          </view>
        </view>
      </view>
      <view class="itit">
        领导回复
      </view>
      <block v-for="(hf,lidx) in info.list" :key="lidx">
        <view class="state" v-if="hf.status>0">
          {{hf.nickname}}：{{hf.content}}
        </view>
      </block>
    </view>
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
      id: '',
      info: '',
      loading: true
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: e.type == 1 ? '周报详情' : e.type == 2 ? '月报详情' : '日报详情'
    })
    this.type = e.type
    this.id = e.id
    this.getInfo()
  },
  methods: {
    showImgs(url) {
      this.$api.previewImgs(this.info.imgs, url)
    },
    getInfo() {
      let that = this,
        params = {
          value: this.id
        }
      this.$axios('api/WorkSummary/GetDetail', 'post', params).then(res => {
        res.Value.fPics = res.Value.fPics.split(',').map(x => this.urlimg + x)
        that.info = res.Value

        that.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f7f9;
}
.infos {
  padding: 32rpx 30rpx;
  box-sizing: border-box;
  .sends {
    overflow: auto;
    .sli {
      float: left;
      width: 20%;
      text-align: center;
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-bottom: 8rpx;
        background-color: #f2f2f2;
      }
      .sname {
        height: 80rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        line-height: 40rpx;
      }
    }
  }
  .imgBox {
    overflow: auto;
    .img {
      width: 200rpx;
      height: 200rpx;
      margin: 0 36rpx 16rpx 0;
      background-color: #f2f2f2;
    }
    .img:nth-child(3n) {
      margin-right: 0;
    }
  }
  .itit {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    margin-bottom: 20rpx;
  }
  .cons {
    font-size: 32rpx;
    font-weight: 400;
    color: #999999;
    line-height: 44rpx;
    margin-bottom: 40rpx;
  }

  .state {
    font-size: 24rpx;
    font-weight: 400;
    color: #f67220;
    line-height: 34rpx;
    padding: 8rpx 0;
  }
}
.userRow {
  margin-bottom: 16rpx;
  padding: 32rpx;
  box-sizing: border-box;
  .uimg {
    image {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      margin-right: 32rpx;
    }
  }

  .send {
    font-size: 32rpx;
    font-weight: 400;
    color: #34404a;
    line-height: 44rpx;
  }

  .time {
    font-size: 22rpx;
    font-weight: 400;
    color: #979797;
    line-height: 32rpx;
  }
}
</style>
